<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <body>

        <ui:composition template="./templates/basetemplate.xhtml">

            <ui:define name="content">

                
                <h:form id="pForm">  
                    <p:megaMenu style="">  
                        <p:menuitem value="Home" url="/faces/home.xhtml" icon="ui-icon-close" />
                        <p:menuitem value="Create Plan" url="/faces/myplan.xhtml" icon="ui-icon-close" />
                        <p:menuitem value="Shared plan" url="/faces/sharedplan.xhtml" icon="ui-icon-close" /> 
                        <p:menuitem value="Settings" url="/faces/setting.xhtml" icon="ui-icon-close" />
                        <p:menuitem value="Sign out" action="#{loginHandler.logout()}" icon="ui-icon-close" />
                    </p:megaMenu>  <h:outputText style=" margin-left: 50px; color: #1c94c4; font-size:15px; font-family: serif" value="Welcome, #{homeHandler.loggedInUser.firstName} #{homeHandler.loggedInUser.lastName}"/>
                    <div style="clear: both; height: 400px; border: 1px solid #DDDDDD; padding-top: 30px;">
                        <p:outputPanel id="dataTable">
                            <p:dataTable id="data"  value="#{myPlanHandler.myPlanList}" var="plan" 
                                         paginator="true" rows="5"   
                                         paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                                         rowsPerPageTemplate="5,10,15">

                                <f:facet name="header">  
                                    My Plan  
                                </f:facet>  

                                <p:column id="title" >  
                                    <f:facet name="header">  
                                        <h:outputText value="Title" />  
                                    </f:facet>  
                                    <h:commandLink id="selected" >
                                        <p:ajax update=":pForm:display" oncomplete="dialog.show()"/><h:outputText value="#{plan.title}" />
                                        <f:setPropertyActionListener value="#{plan}" target="#{myPlanHandler.selectedPlan}"/>
                                    </h:commandLink>  
                                </p:column>  

                                <p:column>  
                                    <f:facet name="header">  
                                        <h:outputText value="Date" />  
                                    </f:facet>  
                                    <h:outputText value="#{plan.plandate}" />  
                                </p:column>  

                                <p:column>  
                                    <f:facet name="header">  
                                        <h:outputText value="Location" />  
                                    </f:facet>  
                                    <h:outputText value="#{plan.location}" />  
                                </p:column> 

                                <p:column>
                                    <f:facet name="header">
                                        <h:outputText value="Option" />
                                    </f:facet>
                                    <p:commandLink id="edit" oncomplete="editdlg.show()"  update=":editpanel">

                                        <f:setPropertyActionListener value="#{plan}" target="#{myPlanHandler.selectedPlan}"/>
                                        <h:graphicImage style="margin-right: 8px;" value="/resources/default/images/edit.png" />
                                    </p:commandLink>
                                     <p:tooltip for="edit" value="Chage plan" showEffect="slide" hideEffect="slide" />
                                    <p:commandLink id="delete"   update=":pForm:dataTable" action="#{myPlanHandler.removePlan(plan.id)}">
                                        <f:setPropertyActionListener  value="#{plan}" target="#{myPlanHandler.selectedPlan}"/>
                                        <h:graphicImage style="margin-right: 8px;" value="/resources/default/images/delete.png" />     
                                    </p:commandLink>
                                    <p:tooltip for="delete" value="Delete plan" showEffect="slide" hideEffect="slide" />

                                </p:column>
                            </p:dataTable>  
                        </p:outputPanel>
                        <p:dialog  id="dlg" header="Plan" widgetVar="dialog" style="width: 100px;"  resizable="false"  
                                   showEffect="explode" hideEffect="explode">  

                            <h:panelGrid  id="display"  columns="2" cellpadding="4">  

                                <h:outputText value="Title:" />  
                                <h:outputText value="#{myPlanHandler.selectedPlan.title}" />  

                                <h:outputText value="Description:" />  
                                <h:outputText value="#{myPlanHandler.selectedPlan.description}" />  

                                <h:outputText value="Date:" />  
                                <h:outputText value="#{myPlanHandler.selectedPlan.plandate}" /> 
                                
                                <h:outputText value="Alarm Date:" />  
                                <h:outputText value="#{myPlanHandler.selectedPlan.alarmDate}" />  

                                <h:outputText value="Location:" />  
                                <h:outputText value="#{myPlanHandler.selectedPlan.location}" />  
                            </h:panelGrid>  
                        </p:dialog>
                    </div>
                    <br /><br />  
                </h:form>

                <p:dialog id="edit" header="Edit plan" widgetVar="editdlg">
                    <p:outputPanel  id="editpanel">
                        <h:form >
                            <table style="margin-top: 5px;">
                                <tr>
                                    <td><h:outputLabel value="Title"></h:outputLabel></td>
                                    <td> <h:inputText id="title" style="width: 350px;" value="#{myPlanHandler.selectedPlan.title}" required="true" requiredMessage="Field is required"></h:inputText><br/>
                                        <h:message styleClass="errorMsg" for="title" /></td>
                                </tr>
                                <tr>
                                    <td valign="top"><h:outputLabel value="Description"></h:outputLabel><br/></td>
                                    <td><p:inputTextarea id="description" style="width: 350px;"  rows="5" cols="20"   value="#{myPlanHandler.selectedPlan.description}" required="true" requiredMessage="Field is required"></p:inputTextarea><br/>
                                        <h:message styleClass="errorMsg" for="description" /></td>                                
                                </tr>
                                <tr>                                
                                    <td><h:outputLabel value="Location"></h:outputLabel></td>
                                    <td><p:inputText id="location"  value="#{myPlanHandler.selectedPlan.location}" required="true" requiredMessage="Field is required" /><br/>
                                        <h:message styleClass="errorMsg" for="location" /></td>                                
                                </tr>
                                <tr>                                
                                    <td><h:outputLabel value="Date"></h:outputLabel></td>
                                    <td><p:inputText id="date" value="#{myPlanHandler.selectedPlan.plandate}" required="true" requiredMessage="Field is required" /><br/>
                                        <h:message styleClass="errorMsg" for="date" /></td>                                
                                </tr>
                                <tr>                                
                                    <td><h:outputLabel value="Privacy"></h:outputLabel></td>
                                    <td><p:inputText id="privacy" value="#{myPlanHandler.selectedPlan.privacy}" required="true" requiredMessage="Field is required" /><br/>
                                        <h:message styleClass="errorMsg" for="date" /></td>                                
                                </tr>
                                <tr>
                                    <td><h:outputLabel value="Alarm me:"></h:outputLabel></td>
                                    <td><p:inputMask   mask="99/99/9999"  id="alarmDate" value="#{myPlanHandler.selectedPlan.alarmDate}"   required="true" requiredMessage="Field is required"></p:inputMask>
                                    <h:message styleClass="errorMsg" for="alarmDate" /></td>
                                </tr>

                                <tr>                                
                                    <td></td>
                                    <td><p:commandButton id="change" update=":pForm:dataTable" value="Change" oncomplete="editdlg.hide();"  action="#{myPlanHandler.updatePlan()}">
                                        
                                        </p:commandButton></td>
                                </tr>                                                        
                            </table>
                        </h:form>
                    </p:outputPanel>
                </p:dialog>
                
            </ui:define>  
        </ui:composition>
    </body>
</html>
